import { Input } from "@/components/ui/input";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useTranslation } from "react-i18next";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Select } from "@/components/custom-ui/select";
import { Edit, Mail, MapPin, Phone, Timer, User2Icon } from "lucide-react";
import { useState } from "react";
import { UpdateEmailDialog } from "./update-email";
import { UpdateMobileDialog } from "./update-mobile";
import { regions } from "@/lib/region";
import type { UserResponseData as UserType } from "@/types/response";
import type { UseFormReturn } from "react-hook-form";
import type { ProfileFormData } from "@/schemas/profile";

interface ProfileInfoProps {
  user: UserType | null;
  isEditing: boolean;
  form: UseFormReturn<ProfileFormData>;
  formatToLocalTime: (dateString: string) => string;
}

export function ProfileInfo({
  user,
  isEditing,
  form,
  formatToLocalTime,
}: ProfileInfoProps) {
  const { t } = useTranslation();
  const [isUpdateEmailDialogOpen, setIsUpdateEmailDialogOpen] = useState(false);
  const [isUpdateMobileDialogOpen, setIsUpdateMobileDialogOpen] = useState(false);

  return (
    <div className="space-y-2 py-2 border-t">
      <div className="grid grid-cols-3 gap-4 items-center h-10">
        <div className="h-full text-sm leading-none select-none font-medium flex items-center gap-2 col-span-1 text-muted-foreground">
          <Mail className="w-4 h-4" />
          {t("Email", { defaultValue: "Email" })}:
        </div>
        <div className="col-span-2 w-full h-full flex items-center truncate overflow-hidden text-ellipsis whitespace-nowrap">
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="flex items-center gap-2">
                <Edit 
                  className="w-4 h-4 text-primary/20 hover:text-primary/60 cursor-pointer" 
                  onClick={() => setIsUpdateEmailDialogOpen(true)}
                />
                {user?.email ? (
                  <span>{user.email}</span>
                ) : (
                  <span className="text-primary/20">--</span>
                )}
              </div>
            </TooltipTrigger>
            {user?.email && <TooltipContent>{user.email}</TooltipContent>}
          </Tooltip>
        </div>
      </div>

      {/* 可编辑字段使用 react-hook-form */}
      <Form {...form}>
        <form className="space-y-2">
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <div className="grid grid-cols-3 gap-4 items-center h-10">
                  <FormLabel className="font-medium flex items-center col-span-1 text-muted-foreground">
                    <User2Icon className="w-4 h-4" />
                    {t("Name", { defaultValue: "Name" })}:
                  </FormLabel>
                  <div className="col-span-2 w-full h-full flex items-center truncate overflow-hidden text-ellipsis whitespace-nowrap">
                    {isEditing ? (
                      <FormControl>
                        <Input
                          placeholder={t("Name", {
                            defaultValue: "Name",
                          })}
                          {...field}
                        />
                      </FormControl>
                    ) : (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          {user?.name ? (
                            <span>{user.name}</span>
                          ) : (
                            <span className="text-primary/20">--</span>
                          )}
                        </TooltipTrigger>
                        {user?.name && (
                          <TooltipContent>{user.name}</TooltipContent>
                        )}
                      </Tooltip>
                    )}
                  </div>
                </div>
                {isEditing && <FormMessage />}
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="first_name"
            render={({ field }) => (
              <FormItem>
                <div className="grid grid-cols-3 gap-4 items-center h-10">
                  <FormLabel className="font-medium flex items-center col-span-1 text-muted-foreground">
                    <User2Icon className="w-4 h-4" />
                    {t("First Name", { defaultValue: "First Name" })}:
                  </FormLabel>
                  <div className="col-span-2 w-full h-full flex items-center truncate overflow-hidden text-ellipsis whitespace-nowrap">
                    {isEditing ? (
                      <FormControl>
                        <Input
                          placeholder={t("First Name", {
                            defaultValue: "First Name",
                          })}
                          {...field}
                        />
                      </FormControl>
                    ) : (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          {user?.first_name ? (
                            <span>{user.first_name}</span>
                          ) : (
                            <span className="text-primary/20">--</span>
                          )}
                        </TooltipTrigger>
                        {user?.first_name && (
                          <TooltipContent>{user.first_name}</TooltipContent>
                        )}
                      </Tooltip>
                    )}
                  </div>
                </div>
                {isEditing && <FormMessage />}
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="last_name"
            render={({ field }) => (
              <FormItem>
                <div className="grid grid-cols-3 gap-4 items-center h-10">
                  <FormLabel className="font-medium flex items-center col-span-1 text-muted-foreground">
                    <User2Icon className="w-4 h-4" />
                    {t("Last Name", { defaultValue: "Last Name" })}:
                  </FormLabel>
                  <div className="col-span-2 w-full h-full flex items-center truncate overflow-hidden text-ellipsis whitespace-nowrap">
                    {isEditing ? (
                      <FormControl>
                        <Input
                          placeholder={t("Last Name", {
                            defaultValue: "Last Name",
                          })}
                          {...field}
                        />
                      </FormControl>
                    ) : (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          {user?.last_name ? (
                            <span>{user.last_name}</span>
                          ) : (
                            <span className="text-primary/20">--</span>
                          )}
                        </TooltipTrigger>
                        {user?.last_name && (
                          <TooltipContent>{user.last_name}</TooltipContent>
                        )}
                      </Tooltip>
                    )}
                  </div>
                </div>
                {isEditing && <FormMessage />}
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="address"
            render={({ field }) => (
              <FormItem>
                <div className="grid grid-cols-3 gap-4 items-center h-10">
                  <FormLabel className="font-medium flex items-center col-span-1 text-muted-foreground">
                    <MapPin className="w-4 h-4" />
                    {t("Address", { defaultValue: "Address" })}:
                  </FormLabel>
                  <div className="col-span-2 w-full h-full flex items-center truncate overflow-hidden text-ellipsis whitespace-nowrap">
                    {isEditing ? (
                      <FormControl>
                        <Input
                          placeholder={t("Address", {
                            defaultValue: "Address",
                          })}
                          {...field}
                        />
                      </FormControl>
                    ) : (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          {user?.address ? (
                            <span>{user.address}</span>
                          ) : (
                            <span className="text-primary/20">--</span>
                          )}
                        </TooltipTrigger>
                        {user?.address && (
                          <TooltipContent>{user.address}</TooltipContent>
                        )}
                      </Tooltip>
                    )}
                  </div>
                </div>
                {isEditing && <FormMessage />}
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="region"
            render={({ field }) => (
              <FormItem>
                <div className="grid grid-cols-3 gap-4 items-center h-10">
                  <FormLabel className="font-medium flex items-center col-span-1 text-muted-foreground">
                    <MapPin className="w-4 h-4" />
                    {t("Region", { defaultValue: "Region" })}:
                  </FormLabel>
                  <div className="col-span-2 w-full h-full flex items-center truncate overflow-hidden text-ellipsis whitespace-nowrap">
                    {isEditing ? (
                      <FormControl>
                        <Select
                          options={regions}
                          value={field.value}
                          onChange={field.onChange}
                          placeholder={t("Region", {
                            defaultValue: "Region",
                          })}
                          error={form.formState.errors.region?.message}
                          className="h-10 w-full"
                        />
                      </FormControl>
                    ) : (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          {user?.region ? (
                            <span>
                              {regions.find(
                                (option) => option.value === user.region
                              )?.label || user.region}
                            </span>
                          ) : (
                            <span className="text-primary/20">--</span>
                          )}
                        </TooltipTrigger>
                        {user?.region && (
                          <TooltipContent>
                            {regions.find(
                              (option) => option.value === user.region
                            )?.label || user.region}
                          </TooltipContent>
                        )}
                      </Tooltip>
                    )}
                  </div>
                </div>
                {isEditing && <FormMessage />}
              </FormItem>
            )}
          />
        </form>
      </Form>

      {/* 不可编辑字段 */}
      <div className="grid grid-cols-3 gap-4 items-center h-10">
        <div className="h-full text-sm leading-none select-none font-medium flex items-center gap-2 col-span-1 text-muted-foreground">
          <Phone className="w-4 h-4" />
          {t("Mobile", { defaultValue: "Mobile" })}:
        </div>
        <div className="col-span-2 w-full h-full flex items-center truncate overflow-hidden text-ellipsis whitespace-nowrap">
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="flex items-center gap-2">
                <Edit 
                  className="w-4 h-4 text-primary/20 hover:text-primary/60 cursor-pointer" 
                  onClick={() => setIsUpdateMobileDialogOpen(true)}
                />
                {user?.mobile ? (
                  <span>{user.mobile}</span>
                ) : (
                  <span className="text-primary/20">--</span>
                )}
              </div>
            </TooltipTrigger>
            {user?.mobile && <TooltipContent>{user.mobile}</TooltipContent>}
          </Tooltip>
        </div>
      </div>
      <div className="grid grid-cols-3 gap-4 items-center h-10">
        <div className="h-full text-sm leading-none select-none font-medium flex items-center gap-2 col-span-1 text-muted-foreground">
          <Timer className="w-4 h-4" />
          {t("Created At", { defaultValue: "Created At" })}:
        </div>
        <div className="col-span-2 w-full h-full flex items-center truncate overflow-hidden text-ellipsis whitespace-nowrap">
          <Tooltip>
            <TooltipTrigger asChild>
              {user?.created_at ? (
                <span>{formatToLocalTime(user?.created_at)}</span>
              ) : (
                <span className="text-primary/20">--</span>
              )}
            </TooltipTrigger>
            {user?.created_at && (
              <TooltipContent>
                {formatToLocalTime(user?.created_at)}
              </TooltipContent>
            )}
          </Tooltip>
        </div>
      </div>
      
      {/* 邮箱更新弹窗 */}
      <UpdateEmailDialog
        open={isUpdateEmailDialogOpen}
        onOpenChange={setIsUpdateEmailDialogOpen}
        currentEmail={user?.email}
      />

      {/* 手机号更新弹窗 */}
      <UpdateMobileDialog
        open={isUpdateMobileDialogOpen}
        onOpenChange={setIsUpdateMobileDialogOpen}
        currentMobile={user?.mobile}
      />
    </div>
  );
}
